<template>
  <div class="list">
    <Content title="美食">
      <!-- 
        在组件的标签内部书写的内容就是插入给组件内部的插槽内容。

       -->
      <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
    </Content>
    <Content title="游戏">
      <ul>
        <li>DNF1</li>
        <li>DNF2</li>
        <li>DNF3</li>
      </ul>
    </Content>
    <Content title="电影">
      <ol>
        <li>战狼1</li>
        <li>战狼2</li>
        <li>战狼3</li>
        <li>战狼4</li>
      </ol>
    </Content>
  </div>
</template>

<script>
import Content from "./components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
  data() {
    return {};
  },
};
</script>

<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
